<!DOCTYPE html>
<html lang="UTF-8">
<head>
    <meta charset="UTF-8">
    <title>显示学生信息</title>
    <style>
        img{
            width: 100px;
            height: 100px;
        }
        /*table{*/
        /*    width: 70%;*/
        /*    margin:0 auto;*/
        /*    border: 1px solid black;*/
        /*    border-collapse: collapse;*/
        /*}*/
        /*tr{*/
        /*    border: 1px solid black;*/
        /*    border-collapse: collapse;*/
        /*}*/
        /*td{*/
        /*    border: 1px solid black;*/
        /*    border-collapse: collapse;*/
        /*    text-align: center;*/
        /*}*/
    </style>
<!--    引入bootstrap样式与jquery-->
    <link rel="stylesheet" href="../../bootstrap-4.4.1-dist/css/bootstrap.css"/>
    <script src="../../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<h1 align="center">软件工程18级学生信息表</h1>
<hr>
<form action="liststudents.jsp" method="post">
    请输入姓名: <input type="text" id="userName" name="userName">
    <input type="submit" value="确定" id="submit" name="submit">
</form>
<hr>

<table id="students" class="table table-bordered table-striped">
    <tr>
        <td>学号</td>
        <td>姓名</td>
        <td>班级</td>
        <td>性别</td>
        <td>系部</td>
        <td>电话</td>
        <td>宿舍号</td>
        <td>照片</td>
        <td>操作</td>

    </tr>
</table>
<script>
    /**
     * 使用jquery重写ajax
     * $("#students")
     * 1. jquery 加载页面后就执行的函数是什么?
     * 2. jquery ajax如何编写?
     * 3. jquery 如何操作table
     */
    //1. 页面加载后自动执行函数
    $(function () {
         //2. jquery ajax
        $.ajax({
            url:"/listStudents",
            type:"POST",
            data:{},
            //请求成功后,执行的回调函数
            success:function (data) {
                //把json字符串转换为json对象数组
                var students=JSON.parse(data)
                //js:对数组的遍历
                for(s of students){
                    var tr="<tr>"
                    //js: json对象的遍历
                    for(var i in s){
                        if(i!="photoPath") {
                            tr += "<td>" + s[i] + "</td>"
                        }else{
                            tr+="<td><img src='" +s[i]+"' /></td>"
                        }
                    }
                    tr+="<td><a href='#'>删除</a>&nbsp;<a href='#'>更新</a> </td>"
                    tr+="</tr>"
                    //jquery:获取表格最后一行,after插入数据
                    $("#students tr:last").after(tr);
                }
            },
            //请求失败后的回调函数
            error:function () {
                console.log("发生错误了,请处理!");
            }
        });
    });

</script>
</body>
</html>